<template>
  <div class="app-container">
    <generate-form ref="generateForm" :data="jsonData" :remote="remoteFuncs" :value="editData" />
    <div class="generate-block">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button type="primary">重置</el-button>
    </div>
    <generate-table ref="generateTable" :data="jsonDataTable" :remote="remoteFuncs" :value="editData">
      <!--自定义新增编辑页面内容-->
      <!--<template slot="table_dialog" slot-scope="scope">-->
      <!--<generate-form :ref="scope.form" :data="jsonData" :remote="remoteFuncs" :value="scope.data"/>-->
      <!--</template>-->
    </generate-table>
    <generate-table ref="generateTable" :data="jsonDataTable" :remote="remoteFuncs" :value="editData">
      <!--自定义新增编辑页面内容-->
      <!--<template slot="table_dialog" slot-scope="scope">-->
      <!--<generate-form :ref="scope.form" :data="jsonData" :remote="remoteFuncs" :value="scope.data"/>-->
      <!--</template>-->
    </generate-table>
  </div>
</template>
<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import GenerateTable from '@/components/CreateTable/GenerateTable'
export default {
  components: {
    GenerateForm,
    GenerateTable
  },
  data: function() {
    return {
      jsonData: {
        'list': [
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '公司代码',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1541661980000_83050'
                    },
                    'key': '1541661980000_83050',
                    'model': 'input_1541661980000_83050',
                    'rules': [
                      {
                        'type': 'string',
                        'message': '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '单行文本',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1541661992000_61477'
                    },
                    'key': '1541661992000_61477',
                    'model': 'input_1541661992000_61477',
                    'rules': []
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1541661977000_36212'
            },
            'key': '1541661977000_36212',
            'model': 'grid_1541661977000_36212',
            'rules': []
          },
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '银行账号',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1541662918000_92776'
                    },
                    'key': '1541662918000_92776',
                    'model': 'input_1541662918000_92776',
                    'rules': [
                      {
                        'type': 'string',
                        'message': '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '对账批次',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1541662927000_84922'
                    },
                    'key': '1541662927000_84922',
                    'model': 'input_1541662927000_84922',
                    'rules': []
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1541662917000_71891'
            },
            'key': '1541662917000_71891',
            'model': 'grid_1541662917000_71891',
            'rules': []
          },
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'date',
                    'name': '对账起始日期',
                    'icon': 'regular/calendar-alt',
                    'options': {
                      'defaultValue': '',
                      'readonly': false,
                      'disabled': false,
                      'editable': true,
                      'clearable': true,
                      'placeholder': '',
                      'startPlaceholder': '',
                      'endPlaceholder': '',
                      'type': 'date',
                      'format': 'yyyy-MM-dd',
                      'timestamp': false,
                      'required': false,
                      'width': '100%',
                      'remoteFunc': 'func_1541662938000_84665'
                    },
                    'key': '1541662938000_84665',
                    'model': 'date_1541662938000_84665',
                    'rules': []
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'date',
                    'name': '对账终止日期',
                    'icon': 'regular/calendar-alt',
                    'options': {
                      'defaultValue': '',
                      'readonly': false,
                      'disabled': false,
                      'editable': true,
                      'clearable': true,
                      'placeholder': '',
                      'startPlaceholder': '',
                      'endPlaceholder': '',
                      'type': 'date',
                      'format': 'yyyy-MM-dd',
                      'timestamp': false,
                      'required': false,
                      'width': '100%',
                      'remoteFunc': 'func_1541662942000_75237'
                    },
                    'key': '1541662942000_75237',
                    'model': 'date_1541662942000_75237',
                    'rules': []
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1541662936000_80965'
            },
            'key': '1541662936000_80965',
            'model': 'grid_1541662936000_80965',
            'rules': []
          }
        ],
        'config': {
          'labelWidth': 100,
          'labelPosition': 'right'
        },
        'table': {
          'showRemove': false,
          'showIndexCol': false,
          'showEdit': false,
          'showExport': false,
          'showAdd': false,
          'stripe': true,
          'border': true
        }
      },
      jsonDataTable: {
        'list': [
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'date',
                    'name': '日期',
                    'icon': 'regular/calendar-alt',
                    'options': {
                      'defaultValue': '',
                      'readonly': false,
                      'disabled': false,
                      'editable': true,
                      'clearable': true,
                      'placeholder': '',
                      'startPlaceholder': '',
                      'endPlaceholder': '',
                      'type': 'date',
                      'format': 'yyyy-MM-dd',
                      'timestamp': false,
                      'required': false,
                      'width': '100%',
                      'remoteFunc': 'func_1541663082000_59699'
                    },
                    'key': '1541663082000_59699',
                    'model': 'date_1541663082000_59699',
                    'rules': []
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '凭证编号',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1541663091000_65961'
                    },
                    'key': '1541663091000_65961',
                    'model': 'input_1541663091000_65961',
                    'rules': [
                      {
                        'type': 'string',
                        'message': '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1541663066000_62617'
            },
            'key': '1541663066000_62617',
            'model': 'grid_1541663066000_62617',
            'rules': []
          },
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '对账单编号',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1541663099000_78298'
                    },
                    'key': '1541663099000_78298',
                    'model': 'input_1541663099000_78298',
                    'rules': [
                      {
                        'type': 'string',
                        'message': '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '项目文本',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1541663107000_37453'
                    },
                    'key': '1541663107000_37453',
                    'model': 'input_1541663107000_37453',
                    'rules': []
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1541663094000_82992'
            },
            'key': '1541663094000_82992',
            'model': 'grid_1541663094000_82992',
            'rules': []
          },
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '借方',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1541663118000_71667'
                    },
                    'key': '1541663118000_71667',
                    'model': 'input_1541663118000_71667',
                    'rules': [
                      {
                        'type': 'string',
                        'message': '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '贷方',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1541663126000_57101'
                    },
                    'key': '1541663126000_57101',
                    'model': 'input_1541663126000_57101',
                    'rules': [
                      {
                        'type': 'string',
                        'message': '格式不正确'
                      }
                    ]
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1541663117000_85251'
            },
            'key': '1541663117000_85251',
            'model': 'grid_1541663117000_85251',
            'rules': []
          }
        ],
        'config': {
          'labelWidth': 100,
          'labelPosition': 'right'
        },
        'table': {
          'showRemove': false,
          'showIndexCol': false,
          'showEdit': false,
          'showExport': false,
          'showAdd': false,
          'stripe': true,
          'border': true
        }
      },
      editData: {},
      values: {},
      remoteFuncs: {

      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm.getData().then(data => {
        // 数据校验成功
        // data 为获取的表单数据
      }).catch(e => {
        // 数据校验失败
      })
    }
  }
}
</script>
